PhatFusion Imagemenu doesnt' work in IE 7

[F2c]

Hi,

i'm working actually on my website, and i've added the imagemenu as
main navigation menu.

I've encountered non problem to change images or change the alert as
in the demo to an a href.

When i test it in IE7, the menu don't work at all and stays locked, i
mean the images are not moving at all !

Here's the html :


<div id="imageMenu">
<ul>
<li class="promo"><a href="promotion_immobiliere.html">Promotion
Immobilière</a></li>
<li class="negoce"><a href="negoce_bois.html">Négoce de bois et
matériaux</a></li>
<li class="negoce_sani"><a href="negoce_chauffage.html">Négoce
de chauffage et sanitaire</a></li>
<li class="agro"><a href="agroalimentaire.html">Agroalimentaire</
a></li>
<li class="crf"><a href="crf_navenne.html">CRF de Navenne</a></
li>
<li class="edition"><a href="edition.html">Edition</a></li>
<li class="gestion"><a href="gestion.html">Gestion immobilière</
a></li>
<li class="agrum"><a href="agrumiculture.html">Agrumiculture</
a></li>
</ul>
</div>

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:600,
border:2,});
});
</script>


and the css :

#imageMenu {
position: relative;
height: 105px;
overflow: hidden;
margin: 0px;
width:830px;
padding-top:20px;
padding-bottom:23px;
padding-left:190px;
}


#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 105px;
padding:0px;
width:830px;
}

#imageMenu ul li {
float: left;
}

#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:100px;
height: 105px;
}

#imageMenu ul li.promo a {
background: url(images/promo.jpg) repeat scroll 0%;
}

#imageMenu ul li.negoce a {
background: url(images/negoce.jpg) repeat scroll 0%;
}

#imageMenu ul li.negoce_sani a {
background: url(images/negoce_sani.jpg) repeat scroll 0%;
}

#imageMenu ul li.agro a {
background: url(images/agro.jpg) repeat scroll 0%;
}

#imageMenu ul li.crf a {
background: url(images/crf.jpg) repeat scroll 0%;
}

#imageMenu ul li.edition a {
background: url(images/edition.jpg) repeat scroll 0%;
}

#imageMenu ul li.gestion a {
background: url(images/gestion.jpg) repeat scroll 0%;
}

#imageMenu ul li.agrum a {
background: url(images/agrum.jpg) repeat scroll 0%;
}

.clear {
clear: both;
}


Does someone knows how can i fix the problem ? I haven't done anything
on the imagemenu.js file, and i'm surprised because on the main page
of this project, it is said that it is IE6 and IE7 friendly...

Thanks for help.

[F2c]

Hello ?

[Fábio M. Costa]

Sorry i haven't used it before. Have you tried talking to them?
Try sending links because sometimes its hard to solve the problem by just looking at the code.
You can try mooshell.net

Cheers,

--
Fábio Miranda Costa
Solucione Sistemas
Front-End Engineer
http://meiocodigo.com

[Sanford Whiteman]

> Hello ?

http://mooshell.net/9GhnF/3

Make sure you don't have trailing commas in object literals (for IE
7-).

-- Sandy

[F2c]

Thanks for replies first,

I have take a look around mooshell, and the menu doesn't work, but i
can't see why...

Here's a link : http://www.lapatinoire-auxboutiquesdupalais.com/v2/

You can see that actually that it's not working on IE7, but i haven't
changed anything in the .js. In the past i had problems using
differents plugins from differents jsframework, but here i only use
Mootools with ImageMenu.

@Sandy : sorry, i'm french, and my english is quite limited, as you
can read. What do you mean by "trailing commas in object literals" ?

THX again from help.

On 14 sep, 02:11, Sanford Whiteman <sa...@cypressintegrated.com>
wrote:

[Thierry bela nanga]

found this in your page,

window.addEvent('domready', function(){

var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:600, border:2,});

});

the problem is the comma after border:2,

the trailing comma is the comma before the '}'

--
http://tbela99.blogspot.com/

fax : (+33) 08 26 51 94 51

[cbolson]

Hi,
by "trailing commas" they mean that, if you have a list of elements
seperated by commas (,) you mustn't leave one at the end like this:
item one, item two, item three,
as this will cause errors in IE (something which IE gets right, other
browsers are more forgiving) and will stop all the javascript from
working.

Looking at your code, this could well be the problem.
You have this:

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:600, border:
2,});
});

You have a "trailing comma" after border:2

Try removing that comma to see if it sorts out your IE7 problem.

Chris

[F2c]

That's working fine now with that :

<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:600, border:

2});
});
</script>


Big thanks to all !

[Fábio M. Costa]

you guys rock!

--
Fábio Miranda Costa
Solucione Sistemas
Front-End Engineer
http://meiocodigo.com

[Sanford Whiteman]

> @Sandy : sorry, i'm french, and my english is quite limited, as you
> can read. What do you mean by "trailing commas in object literals" ?

Thanks to others for clarifying that for you... I had put up your code
in MooShell with that fix in it.

-- Sandy